import { SignalCellularConnectedNoInternet4BarOutlined } from "@mui/icons-material";
import React from "react";
import { Component } from "react";

class BasicUsageCC extends Component<any,any>{
    timer!: NodeJS.Timeout;

    constructor(props:any){
        super(props);
        this.state = {
            score:1,
            date:new Date()
        }
    }
  
    componentDidMount(){
        this.timer = setInterval(()=>{
            this.setState(()=>{
                return {
                    date:new Date()
                }
            })
        },1000);
    }

    componentWillUnmount(){
        clearInterval(this.timer);
    }
    render(){
        return (<div>
            <div>{`name: ${this.props.name}, age ${this.props.age}`}</div>
            <div>Score: {this.state.score}</div>
            <div>Date: {this.state.date.toTimeString()}</div>
            <button onClick={()=>{this.setState({score:this.state.score+1})}}>Add Score</button>
        </div>);
    }
}

export default BasicUsageCC;